import React, { useState } from 'react';
import { Button, Icon } from 'antd';
import cn from 'classnames';
import styles from './index.less';

const TitleControl = ({
    children,
    title = '',
    titleRender,
    style = {},
    showButton = true,
    bottomBorder = true,
    initialActive = true,
    className,
    ...rest
}) => {
    const [active, setActive] = useState(initialActive);
    const onActiveChange = () => {
        setActive(!active);
    };
    return (
        <div className={cn(className, styles.container, { [styles.borderBottomContainer]: bottomBorder })}>
            {title && (
                <div className={`${styles.titleWrap} ${style}`}>
                    {titleRender ? titleRender(title, { ...rest }) : <div className={styles.titleText}>{title}</div>}
                    {showButton ? (
                        <Button type="link" onClick={onActiveChange}>
                            {active ? '收起' : '展开'}
                            <Icon type={active ? 'caret-up' : 'caret-down'} />
                        </Button>
                    ) : null}
                </div>
            )}
            <div style={{ display: active ? 'block' : 'none' }}>{children}</div>
        </div>
    );
};
export default React.memo(TitleControl);
